<template>
  <view>
    <view class="my-settle-container">
      <!-- 全选区域 -->
      <label class="radio">
        <radio color="#C00000" :checked="buttonRai" @click="btnRadio(buttonRai)" />
        <text>{{buttonRai?'取消全选':"全选"}}</text>
      </label>
      <!-- 合计区域 -->
      <view class="amount-box">
        合计:<text class="amount">￥{{amount(cartPrice)}}</text>
      </view>
      <!-- 结算按钮 -->
      <view class="btn-settle" @click="settleClick">结算({{toCount}})</view>
    </view>
  </view>
</template>

<script>
  import { mapGetters,mapState,mapMutations } from "vuex"
  export default {
    name:"my_settle",
    data() {
      return {
        buttonRai:true,
        num:3
      };
    },
    watch: {
      // 侦听器侦听本地单个商品的勾选状态
      // 页面初始化立刻侦听
      buttonCart:{
        handler(val) {
         this.buttonRai = val
        },
        immediate:true
      }
    },
    computed:{
      ...mapGetters('Cart',['buttonCart','cartPrice','toCount']),
      ...mapGetters('user',['addstr']),
      ...mapState('user',['token']),
    },
    methods: {
      ...mapMutations('user',['updateRedirectInfo']),
      // 点击全选修改全部商品的状态
      btnRadio(i) {
        this.buttonRai = !i
        this.$store.commit('Cart/clickSettle',this.buttonRai)
      },
      amount(num) {
        return Number(num).toFixed(2)
      },
      // 点击结算
      settleClick() {
        if(!this.addstr && this.toCount === 0) return uni.$showMsg("请勾选商品并选择收货地址")
        if(this.toCount === 0) return uni.$showMsg("请勾选商品")
        if(!this.addstr) return uni.$showMsg("请选择收货地址")
        if(!this.token) return this.showTop()
        uni.$showMsg("没钱钱惹！v我50继续开发！")
      },
      showTop() {
        this.num = 3
        this.showToast(this.num) // 先展示3秒
        let a = setInterval(()=>{
          this.num--
          if(this.num <= 0) {
            clearInterval(a)
            uni.switchTab({
              url: '/pages/my/my',
              success: () => {
                // 调用 vuex 的 updateRedirectInfo 方法，把跳转信息存储到 Store 中
                this.updateRedirectInfo({
                  // 跳转的方式
                  openType: 'switchTab',
                  // 从哪个页面跳转过去的
                  from: '/pages/cart/cart'
                })
              }
            })
            return
          }
          this.showToast(this.num) // 在把减减的秒数传过去
        },1000)
      },
       // 三秒跳转的提示信息
      showToast(num) {
        uni.showToast({
          icon:"none",
          mask:true, // 为页面添加透明遮罩，防止点击穿透
          title:"请登录后再结算。" + num + "秒后跳转到登录页！",
          duration:1500
        })
      },
    }
  }
</script>

<style lang="scss">
.my-settle-container {
  width: 100%;
  height: 50px;
  font-size: 15px;
  padding-left: 5px;
  position: fixed;
  bottom:0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  .radio {
    display: flex;
    align-items: center;
  }
  .btn-settle {
    width: 100px;
    text-align: center;
    line-height: 50px;
    background-color: #FF0000;
    color: #f7f7f7;
  }
  .amount-box {
    margin-right: 2px;
    .amount {
      color: #c00000;
      font-weight: bold;
    }
  }
}
</style>